import React, { Component } from 'react';
import Order from '../../containers/user/Order';
import LinkTitle from '../common/LinkTitle';
import { ACTIONSTATE } from '../../utils/constant';
import 'moment/locale/zh-cn';
import { Tabs, Modal } from 'antd';
import CommentModal from '../modal/CommentModal';
import UnCommentModal from '../modal/UnCommentModal';
const TabPane = Tabs.TabPane;

export default class MyComment extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: '1',
      id: null
    };
  }
  componentDidMount() {
    const { location, getOrderList, datasource, filter } = this.props;
    let { activeKey } = this.state;
    if (!datasource) {
      getOrderList({ state: activeKey.toString() });
    } else {
      filter({ state: activeKey.toString() });
    }
  }

  changePane = key => {
    const { filter } = this.props;
    this.setState({
      activeKey: key
    });
    filter({ state: key });
  };

  action = item => {
    const {
      openCommentModal,
      getDetail,
      setCommentOrder,
      openUnCommentModal
    } = this.props;
    if (item.state == 1) {
      setCommentOrder(item);
      openUnCommentModal();
    } else {
      setCommentOrder(item);

      openCommentModal();
      getDetail({ id: 1 });
    }
  };

  render() {
    const { activeKey } = this.state;
    const { list } = this.props;
    let pagination = list && list.length > 10 ? true : false;
    let tabs = [
      { tab: '待评价', key: ACTIONSTATE[1].type },
      { tab: '已评价', key: ACTIONSTATE[2].type }
    ];
    return (
      <div className="userCWrapper myOrder myComment">
        <div className="ltWrapper">
          <LinkTitle title="我的评价" />
        </div>
        <Tabs
          animated={{ inkBar: true, tabPane: false }}
          onChange={key => this.changePane(key)}
          activeKey={activeKey}
        >
          {tabs.map((item, index) => (
            <TabPane tab={item.tab} key={item.key}>
              <Order
                list={list}
                pagination={pagination}
                hidePrice={true}
                hideOrderno={true}
                action={this.action}
              />
            </TabPane>
          ))}
        </Tabs>
        <CommentModal />
        <UnCommentModal />
      </div>
    );
  }
}
